<template>
    <!-- 预约信息 -->
    <view class="purchaseDetailContainer">
        <cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles" :title="'预约厨师'">
        </cunstom_navigation_bar>
        <view class="addressBox">
            <view class="addressContain">
                <view class="head">厨娘上门</view>
                <view class="address">
                    <image class="left" src="https://visionmpapi.jiuerjindi.com/upload/mp/bookDetail/addrIcon.png">
                    </image>
                    <view class="middle">

                        <view class="line1-2" v-if="addressSelect.address">
                            {{addressSelect.address}}
                        </view>
                        <view class="line1-2" v-else>
                            暂无默认地址
                        </view>
                    </view>
                    <view class="right" @tap="jumpUrl(1)">
                        <image src="https://visionmpapi.jiuerjindi.com/upload/mp/bookDetail/edit.png">
                        </image>
                    </view>
                </view>
                <view class="info" v-if="addressSelect.realname">
                    <span class="name">{{addressSelect.realname}}</span>
                    <span class="name">{{addressSelect.mobile}}</span>
                </view>

            </view>

        </view>
        <view class="productInfoBox">
            <view class="productInfo">
                <view class="line1">
                    <view class="left">上门时间<span>*</span></view>
                    <view class="right">{{ cookTime}}
                        <view class="arrow" @tap="jumpUrl(2)"></view>
                    </view>

                </view>
                <view class="line2">
                    <image src="https://visionmpapi.jiuerjindi.com/upload/mp/bookDetail/cookImg.png"></image>

                    <view class="right">
                        <view class="name">厨娘上门
                        </view>
                        <view class="types">
                            <view class="type">{{currentType.goods_sku_text}}</view>
                            <view class="type">{{currentBuy.name}}</view>
                        </view>
						
                        <view class="priceAndNum">
                            <view class="price">￥{{price}}</view>
							<!--
                            <view class="numChange">
                                <view class="add">-</view>
                                <view class="quantity">
                                    {{quantity}}
                                </view>
                                <view class="subtraction">+</view>
                            </view>
							-->
                        </view>
                    </view>
                </view>






            </view>
        </view>
        <view class="extra1Box">
            <view class="extra1">
                <view class="eachLine" @tap="jumpTo('/page_valueAddService/valueAddService')">
                    <view class="left">增值服务</view>
                    <view class="right">请选择 ></view>
                </view>
                <view class="eachLine" @tap="jumpTo('/page_bookRemark/bookRemark')">
                    <view class="left">买家备注</view>
                    <view class="right">{{user_memo}} ></view>
                </view>

            </view>
        </view>
        <view class="extra1Box">
            <view class="extra1">
                <view class="eachLine">
                    <view class="left">优惠券
                        <span>已选最大优惠</span>
                    </view>
                    <view class="right">-￥0 ></view>
                </view>


            </view>
        </view>
        <view class="extra1Box">
            <view class="extra1">
                <view class="eachLine">
                    <view class="left">商品小计</view>
                    <view class="right">￥296.00</view>
                </view>
                <view class="eachLine">
                    <view class="left">优惠券
                        <span>（满￥0.00享8.50折）</span>
                    </view>
                    <view class="right">-￥0</view>
                </view>
                <view class="eachLine">
                    <view class="left">运费
                        <span>（厨娘上门）</span>
                    </view>
                    <view class="right">￥0</view>
                </view>
            </view>
        </view>
        <view class="zhanwei"></view>
        <view class="fixBar">
            <view class="left">
                <view class="text">预计消费：</view>
                <view class="sum"><span class="icon">￥</span>{{total}}<span class="txt">起</span></view>
            </view>

            <view class="createOrder" @click="createOrder()">
                <image src="https://visionmpapi.jiuerjindi.com/upload/mp/bookDetail/orderBtn.png"></image>
            </view>
        </view>

    </view>
</template>
<script>
    const util = require("@/utils/util.js");
    const api = require("@/utils/api.js");
    var QQMapWX = require('../utils/qqmap-wx-jssdk.js');
    const mapChange = require('../utils/mapChange.js');

    const app = getApp();
    export default {
        data() {
            return {
                startDate: '',
                businessHours: '',
                longitude: '',
                showFetchPopup: false,
                latitude: '',
                selfFetchID: '',
                selfFetchName: '',
                pickUpTime: '',
                canSubmit: true,
                quantity: 1,
                mallProductId: '',
                selectedOption: {},
                openId: "",
                defaultAddress: {
                    name: '',
                    phone: ''
                },
                openDays: [],
                imgDomain: "",
                antiqueDetail: [],
                selfFetchList: null,
                canClick: true,
                days: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'],
                cnDays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                propStyles: {
                    iconSrc: "black",
                    bgColor: '#FECF01',

                },
				cookTime: '', // 上门时间
				services: [], // 服务
				user_memo: '', // 用户备注
				currentType: {},
				currentBuy: {},
				price: 0,
				total: 0,
				cook_id: '', // 厨师id
				addressSelect: null, // 地址
            };
        },
        computed: {

        },
        methods: {
            jumpTo(url) {
                uni.navigateTo({
                    url: url,
                })
            },
            chooseTime(e) {
                console.log(e);
                const date = new Date(e);
                const weekday = date.getDay();
                let day = this.days[weekday]
                let index = this.openDays.indexOf(day)
                if (index == -1) {
                    util.toast(`${this.cnDays[weekday]}不营业，请重新选择日期`)
                    this.pickUpTime = ''
                }
                console.log(weekday);
            },
            getDate() {
                let date = new Date()
                const year = date.getFullYear()
                const month = date.getMonth() + 1
                const day = date.getDate()
                return `${year}-${this.addZero(month)}-${this.addZero(day)}`
            },
            addZero(num) {
                if (num < 10) {
                    num = `0${num}`
                }
                return num
            },
            getKM(d) {
                let km = (d / 1000).toFixed(1)
                if (km < 1) {
                    return d.toFixed(1) + 'm'
                } else {
                    return km + 'km'
                }

            },
            changeFetchPopup() {
                console.log('按钮~~', this.showFetchPopup);
                this.showFetchPopup = true
                console.log('按钮~~', this.showFetchPopup);
                if (this.showFetchPopup) {
                    this.$refs.fetchPopup.open('bottom')
                } else {
                    this.$refs.fetchPopup.close()
                    this.pickUpTime = ''
                }

            },
            getSelfFetchList(params) {

                util.request(api.selfFetchList, params, 'GET', 'application/json').then(res => {

                    if (res.code == 200) {

                        this.selfFetchList = res.data
                        // this.selfFetchList = [...this.selfFetchList, ...this.selfFetchList, ...this.selfFetchList]


                    } else {
                        util.toast('查询失败')
                    }

                }).catch((err) => {
                    console.log('err', err)

                });
            },

            getLocation() {
                console.log('进入getLocation')
                var _this = this
                const tMap = new QQMapWX({
                    key: 'WORBZ-3BOW3-UF53Q-OISUV-2HYQZ-67FRX' //开发者密钥
                });

                uni.getLocation({
                    type: 'wgs84',
                    geocode: true,
                    success: (res) => {
                        console.log("获取经纬度成功");
                        const re = mapChange.wgs84Togcj02(res.longitude, res.latitude)
                        console.log('经纬度~~', re)
                        _this.longitude = re[0]
                        _this.latitude = re[1]
                    },
                    fail: () => {
                        console.log("获取经纬度失败");
                    },
                    complete: () => {

                        tMap.reverseGeocoder({
                            location: {
                                latitude: _this.latitude,
                                longitude: _this.longitude
                            },
                            success: function (res) {
                                console.log("解析地址成功", res);
                                console.log("当前地址：", res.result.address);

                                _this.getSelfFetchList(
                                    {
                                        "latitude": _this.latitude,
                                        "longitude": _this.longitude,
                                        "tenantId": _this.antiqueDetail.tenantId,
                                        "productId": _this.mallProductId
                                    }
                                );

                            },
                            fail: function (res) {
                                uni.showToast({
                                    title: '定位失败',
                                    duration: 2000,
                                    icon: "none"
                                })
                                console.log(res);
                            },
                            complete: function (res) { //无论成功失败都会执行
                                console.log('获取定位信息')
                                return
                                uni.openLocation({
                                    latitude: _this.latitude,
                                    longitude: _this.longitude,
                                    success: function () {
                                        console.log('success');
                                    }
                                });
                            }
                        })
                    }
                })
            },
           
            receiveStatus(status) {
                if (status == 1) {
                    return '可领证'
                }
                //  else if (status == 3) {
                //   return '已领证'
                // }
            },
            checkboxChange: function (e) {
                this.canSubmit = e.detail.value.length == 0 ? false : true;
            },
            createOrder() {
                if (!this.addressSelect.address  && !this.pickUpTime) {
                    util.toast('请选择自提地点和时间')
                    return
                }
                if (!this.canSubmit) {
                    return
                }
				let that = this;
                setTimeout(function () {
                    that.canClick = true
                    console.log('可以点击~~', this.canClick);
                }, 5000)
                if (this.canClick) {
					let services = {
						services: this.services,
						currentBuy : this.currentBuy
					}
					// 提交
					let formData = {
						user_id : app.globalData.user.user_id,
						cook_id : this.cook_id,
						receiver : this.addressSelect.realname,
						address : this.addressSelect.address,
						phone : this.addressSelect.mobile,
						use_time: this.pickUpTime,
						sku_id: this.currentType.id, // 规格
						amount : this.total,
						discount : 0 , // 优惠金额
						shippingfee : 0 , // 配送费
						saleamount : this.total, //应付款金额
						payamount : this.total, //实际付款金额
						services : JSON.stringify(services),
						use_time : this.cookTime,
						user_memo: this.user_memo,
					};
					util.request(api.orderAdd, formData
					  , 'POST', 'application/x-www-form-urlencoded').then(res => {
					    if (res.code == 200) {
							uni.navigateTo({
							    url: '/page_myOrder/myOrder'
							})
					    } 
					  }).catch((err) => {
					    console.log('err', err)
					    reject(err);
					  });
				}
            },
            jumpUrl(num) {
                if (num == 1) {
                    uni.navigateTo({
                        url: `/page_myAddress/myAddress?id=null&type=bookDetail`
                    })
                } else if (num == 2) {
                    uni.navigateTo({
                        url: `/page_cookTime/cookTime`
                    })
                }
            },
            getOrderAddress(id) {
                util.request(api.getOrderAddress, {
                }, 'GET', 'application/json').then(res => {
                    if (res.code == 200) {
                        let addressList
                        addressList = res.rows
                        // this.defaultAddress = addressList[0]
                        // this.defaultAddress = []
                        if (id) { //从修改地址页面过来，使用修改后的值
                        } else {//使用默认值
                        }
                        addressList.forEach((el) => {
                            if ((!id && el.isDefault == 1) || (id && el.id == id)) {
                                this.defaultAddress = el
                            }
                        })
                        this.getGoodInfo();

                    } else {
                        util.toast('查询失败')
                    }

                }).catch((err) => {
                    console.log('err', err)
                });
            },
            getGoodInfo() {
                let queryParams = {
                    mallProductId: this.mallProductId,
                    quantity: this.quantity,
                }
                if (this.defaultAddress.id) {
                    queryParams.addressID = this.defaultAddress.id
                }

                util
                    .request(
                        api.productDetail,
                        queryParams,
                        "GET",
                        "application/json"
                    )
                    .then((res) => {
                        if (res.code == 200) {
                            this.antiqueDetail = JSON.parse(JSON.stringify(res.data))
                            if (this.antiqueDetail.deliveryType == 3) {
                                this.getLocation()
                            }

                            this.antiqueDetail.wxNormalMallProductSkuVoList.forEach(element => {
                                if (element.skuId == this.skuId) {
                                    this.selectedOption = element
                                }
                            });


                        } else {
                            util.toast("获取失败，请重试~");
                        }
                    })
                    .catch((err) => {
                        console.log("err", err);
                        reject(err);
                    });
            },
            changeQuantity(num) {
                if (this.quantity == 1 && num == -1) {
                    util.toast('低于最小购买件数！')
                } else if (this.quantity == this.selectedOption.stock && num == 1) {
                    util.toast('超出限购数或产品库存上限！')
                } else {
                    this.quantity += num
                } 


            },

            goback() {
                console.log("回去");
                uni.navigateBack();
            },


        },
        onReady() { },
        // onShow(){

        //       },
        created() { },
        onShow: function () {
			// 上面时间
			this.cookTime = uni.getStorageSync('cookTime');
			this.services = uni.getStorageSync('services');
			this.user_memo = uni.getStorageSync('user_memo');
			//
			this.currentType = uni.getStorageSync('currentType');
			this.currentBuy = uni.getStorageSync('currentBuy');
			this.price = uni.getStorageSync('price');
			this.total = this.price;
			// 地址
			this.addressSelect = uni.getStorageSync('addressSelect');
			console.log("->this.addressSelect:"+ this.addressSelect);
			
        },
        watch: {
            selfFetchName(newVal, oldVal) {
                // 监听文本框值的改变
                if (newVal !== oldVal) {
                    // 执行需要在文本框值改变时执行的方法
                    console.log('文本框的值发生改变');
                    // 调用其他方法
                    this.pickUpTime = '';
                }
            }
        },


        onLoad: function (option) {

            //option为object类型，会序列化上个页面传递的参数
            // console.log('onload~~~购买页面', option);
            // this.mallProductId = option.mallProductId;
            // this.skuId = option.skuId
            // this.quantity = Number(option.quantity)
            // this.getOrderAddress(option.id)
            // this.startDate = this.getDate()
            this.imgDomain = process.env.VUE_APP_BASE_URL;
			this.cook_id = uni.getStorageSync('cook_id');
        },

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;
        background: #F4F4F2;
    }
</style>
<style lang="scss" scoped>
    .purchaseDetailContainer {
        background: #f4f4f2;
        box-sizing: border-box;

        /* ::v-deep .companyInfoContainer {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
  
        .navigationBar {
          background: transparent;
        }
      } */
    }

    .addressBox {
        background: #FECF01;

        width: 750rpx;
        height: 282rpx;
        display: flex;
        justify-content: center;

        .addressContain {


            width: 690rpx;
            height: 170rpx;

            padding: 38rpx;

            margin-top: 54rpx;
            height: 300rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 20rpx 20rpx 20rpx 20rpx;

            .head {
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 500;
                font-size: 36rpx;
                color: #333333;
                margin-bottom: 36rpx;
            }

            .address {
                display: flex;

                align-items: center;

                .left {
                    width: 50rpx;
                    height: 52rpx;
                    margin-right: 16rpx;
                }

                .middle {
                    width: 644rpx;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;



                    .line1-2 {
                        font-weight: 500;
                        font-size: 28rpx;
                        color: #2E3331;
                    }
                }

                .right {
                    image {
                        width: 12rpx;
                        height: 20rpx;
                    }
                }
            }

            .info {
                .name {
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #333333;
                    opacity: 0.7;
                    margin-right: 20rpx;
                }


            }

        }

        .line2 {
            color: #737373;
            display: flex;
            align-items: center;
            height: 101rpx;

            .selectImg {
                width: 60rpx;
                height: 60rpx;
                margin: 0rpx 20rpx 0rpx 30rpx;
            }

            .txt {
                width: 515rpx;
            }

        }
    }

    .productInfoBox {
        width: 100%;
        display: flex;
        justify-content: center;

        .productInfo {
            background: #FFFFFF;
            margin: 0rpx 20rpx;

            padding: 24rpx 28rpx;
            margin-top: 92rpx;
            box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            width: 690rpx;
            height: 360rpx;

            .line1 {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .left {
                    font-weight: 500;
                    font-size: 28rpx;
                    color: rgba(51, 51, 51, 0.6);
                }

                span {
                    color: #D93F11
                }

                .right {
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #333333;
                    display: flex;
                    align-items: center;

                    .arrow {
                        width: 20rpx;
                        height: 20rpx;
                        transform: rotate(45deg);
                        border-top-color: rgba(51, 51, 51, 0.6);
                        border-top-style: solid;
                        border-top-width: 1px;
                        border-right-color: rgba(51, 51, 51, 0.6);
                        border-right-style: solid;
                        border-right-width: 1px;
                    }
                }

            }

            .line2 {
                display: flex;
                margin-top: 32rpx;
                margin-bottom: 57rpx;

                image {
                    width: 208rpx;
                    height: 208rpx;
                    border-radius: 20rpx 20rpx 20rpx 20rpx;
                    margin-right: 24rpx;
                }

                .right {
                    flex: 1;

                    .name {
                        height: 50rpx;
                        font-weight: 500;
                        font-size: 28rpx;
                        color: #333333;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 2;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        margin-bottom: 10rpx;

                        span {
                            border: 1px solid #ccc;
                            font-size: 20rpx;
                            margin-right: 10rpx;
                        }
                    }

                    .types {
                        display: flex;

                        .type {
                            line-height: 34rpx;
                            text-align: center;
                            width: 98rpx;
                            height: 34rpx;
                            background: rgba(51, 51, 51, 0.1);
                            border-radius: 10rpx 10rpx 10rpx 10rpx;
                            margin-right: 24rpx;
                            font-weight: 500;
                            font-size: 16rpx;
                            color: rgba(51, 51, 51, 0.6);
                        }
                    }

                    .priceAndNum {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-top: 62rpx;

                        .price {
                            font-weight: 500;
                            font-size: 28rpx;
                            color: #D93F11;

                        }

                        .numChange {
                            display: flex;

                            .add,
                            .subtraction {
                                width: 49rpx;
                                height: 49rpx;
                                background: #F4F4F2;
                                border-radius: 7rpx;
                                color: #333;
                                text-align: center;
                                line-height: 49rpx;
                            }

                            .quantity {
                                background: #FECF01;
                                border-radius: 15rpx;
                                min-width: 49rpx;
                                height: 49rpx;
                                line-height: 49rpx;
                                text-align: center;
                                margin: 0rpx 10rpx;
                            }
                        }
                    }
                }
            }





        }
    }

    .extra1Box {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .extra1 {
        width: 690rpx;

        background: #FFFFFF;
        box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        padding: 0rpx 24rpx;
        margin-top: 20rpx;

        .eachLine {
            display: flex;
            justify-content: space-between;
            height: 90rpx;
            align-items: center;

            .left {
                font-weight: 500;
                font-size: 28rpx;
                color: rgba(51, 51, 51, 0.6);
            }

            .right {
                font-weight: 400;
                font-size: 24rpx;
                color: rgba(51, 51, 51, 0.6);
            }
        }
    }

    .zhanwei {
        width: 750rpx;
        height: 184rpx;
    }

    .fixBar {
        width: 750rpx;
        height: 184rpx;
        background: #FFFFFF;
        box-shadow: 0rpx -10rpx 40rpx 0rpx rgba(0, 0, 0, 0.07);
        border-radius: 68rpx 68rpx 0rpx 0rpx;
        position: fixed;
        bottom: 0rpx;
        left: 0rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0rpx 26rpx 0rpx 30rpx;

        .left {
            display: flex;
            align-items: center;

            .text {
                font-weight: 400;
                font-size: 28rpx;
                color: rgba(51, 51, 51, 0.6);
            }

            .sum {
                font-size: 40rpx;
                font-weight: 700;
                color: #D93F11;

                .icon {
                    font-size: 24rpx;
                    font-weight: 700;
                    color: #D93F11;
                }

                .txt {
                    color: #333333;
                    font-size: 24rpx;
                }
            }
        }

        .createOrder {
            image {
                width: 336rpx;
                height: 138rpx;
            }
        }



    }

    .selfFetchList {


        .box {
            background-color: #ffffff;

            height: 700rpx;
            overflow: auto;
        }

        .line1 {
            width: 100%;
            display: flex;
            justify-content: center;
            position: fixed;
            background-color: #ffffff;

            .title {
                align-content: center;
                display: flex;
                justify-content: center;

                height: 135rpx;
                align-items: center;
                font-weight: 600;
                font-size: 32rpx;
                color: #333333;

            }

            .closeIcon {
                width: 60rpx;
                height: 60rpx;
                position: absolute;
                top: 40rpx;
                right: 60rpx;
            }
        }

        .list {
            margin-top: 150rpx;

            .row {
                width: 100%;
                display: flex;
                justify-content: space-between;
                /* margin-bottom: 24rpx; */
                border-bottom: 1rpx solid #ccc;
                /* padding-bottom: 20rpx; */
                padding: 20rpx 20rpx;
                align-items: center;

                .name {
                    font-weight: 600;
                    font-size: 28rpx;
                    color: #333333;
                    margin-bottom: 5rpx;

                }

                .addr {
                    margin-bottom: 5rpx;
                }

                .addr,
                .phone {
                    font-size: 24rpx;
                    color: #333333;
                }

                image {
                    width: 60rpx;
                    height: 60rpx;
                }
            }
        }

    }




    ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
    }

    /deep/ .uni-popup .vue-ref {
        padding-bottom: 0px !important;
    }

    /deep/ .uni-date {
        /* height: 35px; */
    }

    /deep/ .uni-date-editor {
        /* width: 157rpx; */
        /* width: 200rpx;
      height: 60rpx; */
        font-size: 26rpx;

        .uni-icons {
            display: none;
        }

        .uni-date__x-input {
            text-align: center;
            /* color: #20B7B2; */
        }

        .uni-date-x {
            border-radius: 30rpx;
            background-color: transparent;
            /* border: 1rpx solid #20B7B2; */
        }

        .uni-date-x--border {
            border: none;
        }
    }

    /deep/ .uni-calendar-item__weeks-box .uni-calendar-item--checked {
        /* background-color: #20B7B2; */
    }

    /deep/ .uni-datetime-picker--btn {
        /* background-color: #20B7B2; */
    }
</style>